<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="utf-8"></meta>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"></meta>
        <title>超级机器狗</title>
        <script>
            function SendCommand(command)
            {
                fetch('/'+command)
                .then(response => response.text())
                .catch(error => alert('Error:', error));
            }
            function RefreshState(url,displayElementId) {
                fetch(url)
                .then(response => response.text())
                .then(text => {
                    document.getElementById(displayElementId).innerHTML = text;
                })
                .catch(error => console.log('Error:', error));
            }
            function SetRefreshInterval(url,displayElementId,interval) {
                setInterval(function() {
                    RefreshState(url,displayElementId);
                }, interval);
            }
            const states=[
                {
                    url: '/battery-voltage',
                    displayElementId: 'BatteryVoltageDisplay',
                    interval: 1000,
                },
                {
                    url: '/battery-percent',
                    displayElementId: 'BatteryPercentDisplay',
                    interval: 1000,
                }
            ]
            states.forEach(state => SetRefreshInterval(state.url,state.displayElementId,state.interval));
        </script>
        <link type="text/css" rel="stylesheet" href="style.css" />
        
    </head>
    <body>
        <div class="container">
            <h1>超级狗狗控制台</h1>
            <div class="button-grid">
                <button class="button">
                    电压<span id="BatteryVoltageDisplay">0</span>
                </button>
                <button class="button">
                    电量<span id="BatteryPercentDisplay">0</span>
                </button>
                </div>
            <div class="button-grid col-1">
                <h3>运动控制</h3>
                <div class="control-flex col-1 button-grid">
                    <input class="button" type="button" value="前" onclick="SendCommand('front');"></input>
                </div>
                <div class="control-flex button-grid">
                    <input class="button" type="button" value="左" onclick="SendCommand('left');"></input>
                    <input class="button" type="button" value="右" onclick="SendCommand('right');"></input>
                </div>
                <div class="control-flex col-1 button-grid">
                    <input class="button" type="button" value="后" onclick="SendCommand('back');"></input>
                </div>
                <div class="col-3 button-grid">
                    <input class="button" type="button" value="抬左手" onclick="SendCommand('left-hand');"></input>
                    <input class="button" type="button" value="抬右手" onclick="SendCommand('right-hand');"></input>
                    <input class="button" type="button" value="坐下" onclick="SendCommand('sit-down');"></input>
                    <input class="button" type="button" value="趴下" onclick="SendCommand('lay-down');"></input>
                    <input class="button" type="button" value="自由模式开" onclick="SendCommand('free-on');"></input>
                    <input class="button" type="button" value="自由模式关" onclick="SendCommand('free-off');"></input>
                </div>
                <div class="button-grid">
                    <input class="button" type="button" value="开心" onclick="SendCommand('happy');"></input>
                    <input class="button" type="button" value="难过" onclick="SendCommand('sad');"></input>
                    <input class="button" type="button" value="愤怒" onclick="SendCommand('angry');"></input>
                    <input class="button" type="button" value="死机" onclick="SendCommand('dead');"></input>
                </div>
            </div>
        </div>
    </body>
</html>